<#import "/spring.ftl" as spring/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <script type="text/javascript" src="/vendor/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="/vendor/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/fastclick.js"></script>
    <script type="text/javascript" src="<@spring.url '/js/wxcard.js'/>"></script>
    <script type="text/javascript" src="<@spring.url '/js/wxpay.js'/>"></script>
    <script>
        $(function() {
            wxcard.init(${merchantId});
        });
    </script>

    <title>支付</title>

    <link rel="stylesheet" href="<@spring.url '/css/qrcode-show.css'/>"/>
</head>

<body>
<div class="content header">
    <div class="title">
        <img src="<@spring.url '/images/shield.png'/>" alt="checked"/> ${title}
    </div>
    <div class="subtitle">向 ${merchantName} 付款</div>
</div>
<div class="content">
    <form id="orderForm" action="<@spring.url '/qrcodes/orders'/>" method="POST">
        <div class="content-inner">
            <input type="hidden" name="hash" value="${hash}"/>
            <input type="hidden" id="amount" name="totalAmount" value="0"/>

            <div class="price-label">付款金额</div>
            <div class="price" onclick="numpad.showPad()">
                <span class="currency">¥</span>
                <span id="order-price"></span>
                <!--<input id="price-val" value="0"/>-->
            </div>
        </div>
        <#if allowCard>
            <input id="coupon-code" name="couponCode" type="hidden"/>
            <input id="card-id" name="cardId" type="hidden"/>
            <input id="coupon-amount" name="couponAmount" type="hidden" value="0"/>

            <div id="coupon" class="content-inner" onclick="wxcard.list()">
                <div class="field-group last">
                    <div class="field-name">
                        <img class="coupon-icon" src="<@spring.url '/images/wallet.png'/>" alt="coupon"/> 优惠券
                    </div>
                    <div id="coupon-label" class="field-value">请选择</div>
                </div>
            </div>
        </#if>
    </form>
</div>

<div id="numpad-container" class="numpad-container">
    <table class="numpad">
        <tr>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('1')">1</a></td>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('2')">2</a></td>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('3')">3</a></td>
            <td>
                <a href="javascript: void(0)" ontouchstart="numpad.deleteVal()">
                    <img class="icon" src="<@spring.url '/images/backspace.png'/>" alt="backspace"/>
                </a>
            </td>
        </tr>
        <tr>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('4')">4</a></td>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('5')">5</a></td>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('6')">6</a></td>
            <td rowspan="3">
                <button id="btn-submit" class="btn-pay disable" disabled onclick="pay(event)">支付</button>
            </td>
        </tr>
        <tr>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('7')">7</a></td>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('8')">8</a></td>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('9')">9</a></td>
        </tr>
        <tr>
            <td>
                <a href="javascript: void(0)" ontouchstart="numpad.hidePad()">
                    <img class="icon" src="<@spring.url '/images/hide-keyboard.png'/>" alt="hide"/>
                </a>
            </td>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('0')">0</a></td>
            <td><a href="javascript: void(0)" ontouchstart="numpad.pressKey('.')">.</a></td>
        </tr>
    </table>
</div>

<script>
    var attachFastClick = Origami.fastclick;
    attachFastClick(document.body);

    var numpad = {
        init: function() {
            this.numpadContainer = document.getElementById("numpad-container");
            this.submitBtn = document.getElementById("btn-submit");
            this.amountDisplay = document.getElementById("order-price");
            this.amountDisplay.innerHTML = 0;
        },
        pressKey: function(val) {
            var amount = numpad.addVal(val);
            this.amountDisplay.innerHTML = amount;

            numpad.updateSubmitBtn(amount == 0);
        },
        addVal: function(val) {
            var amount = this.amountDisplay.innerHTML;

            if (amount === '0' && val !== '.') {
                return val;
            }

            if (val === '.' && amount.indexOf('.') > 0) {
                return amount;
            }

            // reached 2 decimal points
            if (amount.length > 3 && amount.charAt(amount.length - 3) === '.') {
                return amount;
            }

            if (amount.length >= 7) {
                return amount;
            }

            return amount + val;
        },
        deleteVal: function() {
            var amount = this.amountDisplay.innerHTML;
            var newAmount = amount.substring(0, amount.length - 1);

            if (!newAmount || newAmount == 0) {
                newAmount = 0;
                numpad.disableSubmitBtn();
            }

            this.amountDisplay.innerHTML = newAmount;
        },
        updateSubmitBtn: function(disable) {
            if (disable) {
                numpad.disableSubmitBtn();
            } else {
                numpad.enableSubmitBtn();
            }
        },
        disableSubmitBtn: function() {
            this.submitBtn.classList.add('disable');
            this.submitBtn.disabled = true;
        },
        enableSubmitBtn: function() {
            this.submitBtn.classList.remove('disable');
            this.submitBtn.disabled = false;
        },
        hidePad: function() {
            this.numpadContainer.classList.add('hidden');
        },
        showPad: function() {
            this.numpadContainer.classList.remove('hidden');
        }
    };
    numpad.init();

    <#if isGeneratedOrder!false>
        function pay() {
            var totalAmount = document.getElementById('order-price').innerHTML;

            var params = {
                totalAmount: totalAmount
            };

            numpad.disableSubmitBtn();
            $.post("/qrcodes/${hash}/aliprepays/${authCode}", params, function(data) {
               var reqId = data.reqId;
               var tradeNo = data.tradeNo;

               function ready(callback) {
                    if (window.AlipayJSBridge) {
                        callback && callback();
                    } else {
                        document.addEventListener('AlipayJSBridgeReady', callback, false);
                    }
                }

                function tradePay(tradeNO) {
                    ready(function(){
                         // 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)
                         AlipayJSBridge.call("tradePay", {
                              tradeNO: tradeNO
                         }, function (data) {
                             if ("9000" == data.resultCode) {
                                top.location.replace("/qrcodes/success?transNo=" + reqId);
                             }
                         });
                    });
                }

                tradePay(tradeNo);
            })
            .fail(function(data) {
                var object = JSON.parse(data.responseText);
                alert(object.errorMsg);
                numpad.enableSubmitBtn();
            });
        }
    <#else>
        function pay(e) {
            e.preventDefault();

            var couponAmountElm = document.getElementById('coupon-amount');

            if (couponAmountElm && couponAmountElm.value > 0) {
                document.getElementById('amount').value = couponAmountElm.value;
            } else {
                var amount = document.getElementById('order-price').innerHTML;
                document.getElementById('amount').value = amount;
            }

            numpad.disableSubmitBtn();
            document.getElementById('orderForm').submit();
        }
    </#if>
</script>
</body>
</html>